<template>
  <el-container v-if="!dialog.save && !dialog.detail">
    <el-header>
      <div class="left-panel">
        <div class="module-filter">
          <label style="margin-right: 10px">{{
            $t("user_data.userKeyworkLabel")
          }}</label>
          <div class="el-select el-select--default">
            <el-input
              type="text"
              v-model="params.searchKeywords"
              :placeholder="$t('table_data.keyWordText')"
              clearable
            ></el-input>
          </div>
        </div>
        <div class="module-filter">
          <label style="margin-right: 10px">{{ $t("user.language") }}</label>
          <el-select
            v-model="params.language"
            :placeholder="$t('table_data.selectText')"
            clearable
          >
            <el-option
              v-for="item in langList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="module-filter">
          <label style="margin-right: 10px">{{
            $t("user_data.userTypeLabel")
          }}</label>
          <el-select
            v-model="params.userType"
            :placeholder="$t('table_data.selectText')"
            clearable
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="module-filter">
          <label style="margin-right: 10px">{{
            $t("user_data.statusLabel")
          }}</label>
          <el-select
            v-model="params.status"
            :placeholder="$t('table_data.selectText')"
            clearable
          >
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="module-filter">
          <el-button type="primary" icon="el-icon-search" @click="upsearch">{{
            $t("table_data.searchText")
          }}</el-button>
          <el-button @click="reset">{{ $t("table_data.resetText") }}</el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable
        ref="table"
        :apiObj="apiObj"
        row-key="id"
        class="el-table--scrollable-y"
        stripe
        border
        :params="params"
        :hideSetting="true"
        @sortChange="sortChange"
      >
        <!-- <el-table-column type="selection" width="50"></el-table-column> -->
        <el-table-column label="表盘ID" prop="id" width="150"></el-table-column>
        <el-table-column label="表盘名字" prop="name" width="150"></el-table-column>
        <el-table-column label="表盘约定标识值" prop="card" width="150"></el-table-column>
        <el-table-column label="售价（人民币）" prop="price" width="150"></el-table-column>
        <el-table-column label="分辨率" prop="resolution" width="150"></el-table-column>
        <el-table-column label="图片" prop="imageUrl" width="150"></el-table-column>
        <el-table-column label="状态" prop="status" width="150"></el-table-column>
        <el-table-column label="试用时间(小时)" prop="trialDuration" width="150"></el-table-column>
        <el-table-column label="兼容设备" prop="compatibleDevices" width="150"></el-table-column>
        <el-table-column label="更新时间" width="150">
					<template #default="scope">
            {{ trnasTime(scope.row.updatedAt) }}
					</template>
        </el-table-column>
        <el-table-column label="创建时间" width="150">
					<template #default="scope">
            {{ trnasTime(scope.row.createdAt) }}
					</template>
        </el-table-column>
        <el-table-column
          :label="$t('table_data.operate')"
          width="150"
          align="center"
        >
          <template #default="scope">
            <el-button-group>
              <el-button
                text
                type="primary"
                size="small"
                @click="table_detail(scope.row, scope.$index)"
                >{{ $t("table_data.detail") }}</el-button
              >
              <el-button
                text
                type="primary"
                size="small"
                @click="table_edit(scope.row, scope.$index)"
                >{{ $t("table_data.edit") }}</el-button
              >
				      <el-button type="success" @click="add(scope.row)">生成表盘激活码</el-button>
              <!-- <el-popconfirm
                :title="$t('table_data.del_text')"
                @confirm="table_del(scope.row)"
                v-if="scope.row.status != 2"
              >
                <template #reference>
                  <el-button text type="danger" size="small">{{
                    $t("table_data.del")
                  }}</el-button>
                </template>
              </el-popconfirm> -->
            </el-button-group>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <!-- <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog> -->
</template>

<script>
// import saveDialog from './client/save'

export default {
  name: "home",
  components: {
    // saveDialog
  },
  data() {
    return {
      langList: [
        {
          name: "简体中文",
          value: "zh_CN",
        },
        {
          name: "繁體中文",
          value: "zh_TW",
        },
        {
          name: "English",
          value: "en_US",
        },
        {
          name: "日本語",
          value: "ja_JP",
        },
      ],
      statusList: [
        {
          name: this.$t("user_data.status.type1"),
          value: 0,
        },
        {
          name: this.$t("user_data.status.type2"),
          value: 1,
        },
        {
          name: this.$t("user_data.status.type3"),
          value: 2,
        },
        {
          name: this.$t("user_data.status.type4"),
          value: 9,
        },
      ],
      typeList: [
        {
          name: this.$t("user_data.userType.type1"),
          value: 1,
        },
        {
          name: this.$t("user_data.userType.type2"),
          value: 2,
        },
      ],
      dialog: {
        save: false,
        detail: false,
      },
      search: {
        keyword: "",
      },
      apiObj: {},
      selection: [],
      searchKey: null,
      params: {
        searchKeywords: null,
        status: null,
        userType: null,
        language: null,
        userName: this.searchKey,
        email: this.searchKey,
        phoneNo: this.searchKey,
        fullName: this.searchKey,
      },
    };
  },
  computed: {
    trnasTime() {
      return (e) => {
        return this.$TOOL.formatDateTime(e);
      }
    }
  },
  async created() {
    this.apiObj = this.$API.watch.getWatchList;
  },
  methods: {
    reset() {
      this.params.status = null;
      this.params.userType = null;
      this.params.language = null;
      this.params.searchKeywords = null;
      this.$refs.table.upData(this.params);
    },
    upsearch() {
      this.$refs.table.upData(this.params);
    },
    //增加
    async add(row) {
      var res = await this.$API.watch.createWatchCode.get({watchFaceId: row.id});
      if(res.code == 200){
        const sendRes = await this.$API.watch.sendCode.get({activationCode: res.data});
        if(sendRes.code == 200 && sendRes.data == 200) {
          this.$TOOL.copyText(res.data);
          this.$alert("激活码已生成, 已复制到剪切板！", "成功提示", {type: 'success'});
        }
      }else{
        this.$alert("激活码生成失败，请联系管理员", "提示", {type: 'error'})
      }
    },
    //编辑
    table_edit(row) {
      this.$router.push({
        path: "/home/client/save",
        query: { type: "add", id: row.id },
      });
      // this.dialog.save = true
      // this.$nextTick(() => {
      // 	this.$refs.saveDialog.open('edit').setData(row)
      // })
    },
    // 详情
    table_detail(row) {
      this.$router.push({
        path: "/home/client/save",
        query: { type: "detail", id: row.id },
      });
      // this.dialog.save = true
      // this.$nextTick(() => {
      // 	this.$refs.saveDialog.open('edit').setData(row)
      // })
    },
    //删除
    async table_del(row, index) {
      var reqData = { userId: row.userId };
      var res = await this.$API.user.delUser.get(reqData);
      if (res.code == "OK") {
        this.$refs.table.tableData.splice(index, 1);
        this.$message.success(this.$t("table_data.delsucc"));
      } else {
        this.$alert(res.message, this.$t("table_data.tips"), { type: "error" });
      }
    },
    //批量删除
    async batch_del() {
      this.$confirm(
        `${this.$t("table_data.deltips1")} ${this.selection.length} ${this.$t(
          "table_data.deltips2"
        )}`,
        this.$t("table_data.tips"),
        {
          type: "warning",
        }
      )
        .then(() => {
          const loading = this.$loading();
          this.selection.forEach((item) => {
            this.$refs.table.tableData.forEach((itemI, indexI) => {
              if (item.id === itemI.id) {
                this.$refs.table.tableData.splice(indexI, 1);
              }
            });
          });
          loading.close();
          this.$message.success(this.$t("table_data.operasucc"));
        })
        .catch(() => {});
    },
    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection;
    },
    //本地更新数据
    handleSuccess(data, mode) {
      if (mode == "add") {
        data.id = new Date().getTime();
        this.$refs.table.tableData.unshift(data);
      } else if (mode == "edit") {
        this.$refs.table.tableData
          .filter((item) => item.id === data.id)
          .forEach((item) => {
            Object.assign(item, data);
          });
      }
    },
  },
};
</script>

<style scoped>
.module-filter {
  margin-right: 10px;
}
.el-header {
  --el-header-height: auto;
}
.left-panel {
  flex-wrap: wrap;
  line-height: 50px;
}
.top-panel {
  margin: 10px;
}
.scTable {
  height: calc(100% - 60px) !important;
}
.el-main.nopadding {
  margin: 0 10px;
}
.el-header {
  margin: 10px;
  border-radius: 4px;
}
</style>
